<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<uni-nav-bar left-icon="back" @clickLeft="goback" @clickRight="gosubmit" left-text="" right-text="安装记录" title="安装"></uni-nav-bar>
		<view class="p15">
			<view class="borBoxs">
				<view class="choose">
					<view class="value">
						<biaofun-region @change="onChangeRegion"></biaofun-region>
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view class="borBoxs">
				<view class="choose">
					<picker @change="housing" v-if="city && housings.length > 0" range-key="communityName" :range="housings" :disabled="isdisabled"
					 class="w100">
						<input class="input" placeholder-class="d1Color" disabled="disabled" :value="communityName" placeholder="请选择小区" />
					</picker>
					<input v-else class="input" placeholder-class="d1Color" disabled="disabled" placeholder="请选择小区" @click.stop="cityshow" />
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view class="borBoxs">
				<view class="choose">
					<picker @change="elevname" v-if="communityName && elevators.length > 0" range-key="elevatorName" :range="elevators"
					 :disabled="isdisabled" class="w100">
						<input class="input" placeholder-class="d1Color" disabled="disabled" :value="elevatorName" placeholder="请选择电梯" />
					</picker>
					<input v-else class="input" placeholder-class="d1Color" disabled="disabled" placeholder="请选择电梯" @click.stop="elevat" />
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>

			<view class="borBoxs">
				<view class="choose">
					<input class="input" type="text" placeholder-class="d1Colors" v-model="detailAddress" placeholder="请输入详细地址" />
				</view>
			</view>
			<view class="borBoxs">
				<picker @change="brands" range-key="brandName" :range="elevatorbrands" :disabled="isdisabled" class="w100">
					<view class="choose">
						<input class="input" placeholder-class="d1Color" disabled="disabled" :value="brandName" placeholder="请选择电梯品牌" />
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="borBoxs">
				<view class="choose">
					<picker @change="models" v-if="elevatorbrands && elevatormodels.length > 0" range-key="modelName" :range="elevatormodels"
					 :disabled="isdisabled" class="w100">
						<input class="input" placeholder-class="d1Color" disabled="disabled" :value="modedictLabel" placeholder="请选择电梯型号" />
					</picker>
					<input v-else class="input" placeholder-class="d1Color" disabled="disabled" placeholder="请选择电梯型号" @click.stop="brandId ? tip('此电梯暂无型号') : tip('请选择电梯品牌')" />
					<uni-icons type="arrowright"></uni-icons>
				</view>

				<!-- 		<view class="choose">
					<picker @change="models" range-key="dictLabel" :range="elevatormodels" :disabled="isdisabled" class="w100">
						<input class="input" placeholder-class="d1Color" disabled="disabled" :value="modedictLabel" placeholder="请选择电梯型号" />
					</picker>
					<uni-icons type="arrowright"></uni-icons>
				</view> -->
			</view>
			<view class="borBoxs">
				<view class="choose">
					<input class="input" type="text" placeholder-class="d1Colors" v-model="elevatorBusiness" placeholder="请输入厂商" />
				</view>
			</view>
			<!-- 备注 -->
			<view class="borBoxs textRTip">
				<view class="comment">
					<fuck-textarea placeholder="备注:" maxlength="100" v-model="remark"></fuck-textarea>
				</view>
			</view>
			<button type="default" @click="submitMaintains">提交</button>
		</view>
	</view>
</template>

<script>
	import fuckTextarea from '@/components/fuck-textarea/fuck-textarea.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import fault from "@/serve/api/fault.js"
	import submit from "@/serve/api/submit.js"
	import {
		imgSet
	} from "@/serve/api/imgSet.js"
	import biaofunRegion from '@/components/biaofun-region/biaofun-region.vue';
	export default {
		components: {
			fuckTextarea,
			uniTag,
			biaofunRegion
		},
		data() {
			return {
				remark: '', //描述
				city: '', //省市区选择
				housings: [],
				detailAddress: '', //详情地址
				elevatorBusiness: '', //电梯厂商
				isdisabled: false,
				communityName: '', //小区名称
				communityId: '', //小区id
				elevators: [], //电梯列表
				elevatorName: '', //电梯名称
				elevatorId: '', //电梯id
				elevatorbrands: [], //电梯品牌
				brandName: '', //电梯品牌名称
				brandId: '', //电梯品牌id
				elevatormodels: [], //电梯类型列表
				modedictLabel: '', //电梯类型名称
				modedictValue: '', //电梯类型id
			}
		},
		onLoad(e) {
			this.elevator_brand() //电梯品牌
			// this.elevator_model() //电梯型号
		},
		methods: {
			// 导航返回
			goback() {
				uni.navigateBack({})
			},
			onChangeRegion(region) {
				this.city = region[0].name + region[1].name + region[2].name
				this.housingt()
			},
			//小区选择
			cityshow() {
				if (this.city == '') {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					})
					return
				} else {
					uni.showToast({
						title: '本地区暂无小区',
						icon: 'none'
					})
					return
				}
			},
			async housingt(e) {
				let parme = {
					detailAddress: this.city,
				}
				const res = await submit.findCommunityByToken(parme);
				this.housings = res.data.data.list;
				this.communityName = '';
				this.communityId = '';
				this.elevatorName = ''; //电梯名称
				this.elevatorId = ''; //电梯id
			},

			async housing(e) {
				this.communityName = this.housings[e.detail ? e.detail.value : e].communityName
				this.communityId = this.housings[e.detail ? e.detail.value : e].communityId
				this.elevator_name()
			},
			elevat() {
				if (this.communityName == '') {
					uni.showToast({
						title: '请选择小区',
						icon: 'none'
					})
					return
				} else {
					uni.showToast({
						title: '本小区暂无电梯',
						icon: 'none'
					})
					return
				}
			},
			//查询电梯
			async elevator_name() {
				let parme = {
					communityId: this.communityId,
				}
				const res = await submit.findElevatorInfoByCommunityId(parme);
				this.elevators = res.data.data.list;

			},
			async elevname(e) {
				this.elevatorName = this.elevators[e.detail ? e.detail.value : e].elevatorName
				this.elevatorId = this.elevators[e.detail ? e.detail.value : e].elevatorId
			},
			//查询电梯品牌

			async elevator_brand(key, code) {
				const res = await fault.selectElevatorBrandList({})
				this.elevatorbrands = res.data.data
			},
			// async getModel(){
			// 	const res = await fault.selectElevatorModelList({brandId:this.ElevatorBrand[this.brandCur].brandId})
			// 	this.modelList = res.data.data
			// },

			// async elevator_brand() {
			// 	let parme = {
			// 		code: 'business_elevator_brand',
			// 	}
			// 	const res = await submit.searchDictionList(parme);
			// 	this.elevatorbrands = res.data.data;
			// },

			async brands(e) {
				this.brandName = this.elevatorbrands[e.detail ? e.detail.value : e].brandName
				this.brandId = this.elevatorbrands[e.detail ? e.detail.value : e].brandId
				this.elevator_model()
			},
			//查询电梯型号
			async elevator_model() {

				const res = await fault.selectElevatorModelList({
					brandId: this.brandId
				})
				this.elevatormodels = res.data.data;
				this.modedictLabel = ''
				this.modedictValue = ''

			},
			async models(e) {
				this.modedictLabel = this.elevatormodels[e.detail ? e.detail.value : e].modelName
				this.modedictValue = this.elevatormodels[e.detail ? e.detail.value : e].modelId
			},
			//表单提交
			async submitMaintains(e) {
				var that = this
				if (!this.city) {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none'
					})
					return
				}
				if (!this.communityId) {
					uni.showToast({
						title: '请选择小区',
						icon: 'none'
					})
					return
				}
				if (!this.elevatorId) {
					uni.showToast({
						title: '请选择电梯',
						icon: 'none'
					})
					return
				}
				if (!this.detailAddress) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				if (!this.brandId) {
					uni.showToast({
						title: '请选择电梯品牌',
						icon: 'none'
					})
					return
				}
				if (!this.modedictValue) {
					uni.showToast({
						title: '请选择电梯类型',
						icon: 'none'
					})
					return
				}
				if (!this.elevatorBusiness) {
					uni.showToast({
						title: '请输入电梯厂商',
						icon: 'none'
					})
					return
				}
				if (!this.remark) {
					uni.showToast({
						title: '请输入备注',
						icon: 'none'
					})
					return
				}
				let parme = {
					installPlace: this.city, //省市区
					elevatorId: this.elevatorId, //电梯id
					elevatorBrand: this.brandId, //电梯品牌
					elevatorModel: this.modedictValue, //电梯型号
					elevatorBusiness: this.elevatorBusiness, //厂商
					detailAddress: this.detailAddress, //详细地址
					remark: this.remark, //备注
				}
				const res = await submit.elevatorInstall(parme);
				if (res.data.code == 0) {
					uni.switchTab({
						url: '/pages/tabbar/work/work'
					})
				}
			},


			// 导航右边事件
			gosubmit() {
				uni.navigateTo({
					url: './install_details'
				})
			},


		}

	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}

	.d1Color {
		/* color: #323232; */

		color: #ADB5C5;
		font-size: 14px;
	}

	.d1Colors {
		color: #ADB5C5;
		font-size: 14px;
		width: 100%;
	}

	.borBoxs {
		width: calc(100vw - 100rpx);
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 10px 0px rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding: 0 20rpx;
	}


	.choose {
		display: flex;
		height: 90rpx;
		justify-content: space-between;
		align-items: center;
	}
	.value{
		width: 100%;
		
	}
	.input {
		text-align: left;
		font-size: 14px;
		width: 100%;
	}

	/* 上传图片 */
	.upload {
		height: 196rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.photograph {
		position: absolute;
		top: 0;
		bottom: 0;
		transform: translate(-50% -50%);
		margin: 0 auto;
	}

	.photograph image {
		width: 64rpx;
		height: 52rpx;
		vertical-align: middle;
		margin: 25rpx;
	}

	.photograph view {

		font-size: 30rpx;
		font-weight: 400;
		color: #989BA6;

	}

	.upload-img {
		width: 177rpx;
		height: 29rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 29rpx;
	}

	.camera {
		margin: 0 auto;
	}

	/* 标签 */
	.uni-tag {
		width: 250rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		display: inline-block;
		margin: 10rpx;
	}

	.tag {
		padding: 5px 15px;
		background-color: #FFFFFF;
		margin: 20px 0 0 0;
		border-radius: 25px;

		/* width: 50%; */
		/* margin: 0 auto; */

	}

	.active {
		color: #FFFFFF;
		background-color: #017EFE;
	}

	.uni-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.p15 {
		padding: 0 20px;
		box-sizing: border-box;
	}

	button {
		width: 335px;
		height: 52px;
		background: #017EFE;
		box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
		border-radius: 26px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 52px;
		margin: 50px auto 34px;
	}

	.textRTip {
		height: auto;
		padding-top: 20rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: transparent;
	}

	.w100 {
		flex: 1;
	}
</style>
